<!-- 学生列表 -->
<template>
  <div class="studnetList-container">
    <BackgroundBox>
      <div v-loadings="props.Loading">
        <div
          class="main"
          v-if="props.tudentListData && props.tudentListData.rows.length"
          
        >
          <el-table :data="props.tudentListData.rows" style="width: 100%">
            <el-table-column prop="studentName" label="姓名" />
            <el-table-column prop="studentID" label="学号" />
            <el-table-column prop="phone" label="电话" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                  size="small"
                  :type="scope.row.id === selectDataRef ? 'danger' : 'primary'"
                  @click="handleEdit(scope.row)"
                >
                  选中
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              background
              :current-page="props.page"
              @current-change="headlePage"
              layout="prev, pager, next"
              :total="props.tudentListData.total"
            />
          </div>
        </div>
        <div class="unavailable" v-else>
          <Unavailable></Unavailable>
        </div>
      </div>
    </BackgroundBox>
  </div>
</template>

<script setup>
import BackgroundBox from "@/components/BackgroundBox/index.vue";
import Unavailable from "@/components/Unavailable/index.vue";
import { ref } from "vue";
const props = defineProps({
  tudentListData: {
    type: Object,
  },
  page: {
    type: Number,
    default: 1,
  },
  Loading: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["headlePage", "handleEdit"]);
const selectDataRef = ref();
const handleEdit = (item) => {
  selectDataRef.value = item.id;
  emit("handleEdit", item);
};

// 改变页码
const headlePage = (value) => {
  emit("headlePage", value);
};
</script>

<style lang="less" scoped>
.studnetList-container {
  width: 100%;
  height: 100%;
  .back-container {
    padding: 20px 20px;
    min-height: 150px;
    .main {
      .pagination {
        margin-top: 10px;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>